// import { forEach } from 'core-js/core/dict';
import echarts from 'echarts'
export default {
  name: 'mixDistrict',
  data: () => ({
    ratioOpt: {},
    minY: 0,
    maxY: 0
  }),
  methods: {
    // line
    initRatioTrend(list, type, cellType, echartType) {
      // console.log(list, type, cellType, echartType);
      this.minY = 0
      this.maxY = 0
      const cell =
        cellType == 0 ? '全部' : cellType == 2 ? '2、3G' : cellType + 'G'
      let aName = null,
        bName = null,
        cName = null,
        yAxisName = '%',
        showName = '覆盖率'
      if (type == 1 || type == 2) {
        showName = type == 1 ? '用户份额' : '网络覆盖'

        aName = 'mobileRatio'
        bName = 'telecomRatio'
        cName = 'unicomRatio'
      }  else if (type == 3) {
        aName = 'mobileCount'
        bName = 'telecomCount'
        cName = 'unicomCount'
        yAxisName = ''
        showName = '小区数量'
      } else {
        aName = 'mobileWeakRatio'
        bName = 'telecomWeakRatio'
        cName = 'unicomWeakRatio'
      }

      if (this.userType ==4&&type == 1) {
        aName = 'mobileUserRatio'
        bName = 'telecomUserRatio'
        cName = 'unicomUserRatio'
      }
      if (this.userType == 5&&type == 1) {
        aName = 'mobileDifficultUserDifference'
        bName = 'telecomDifficultUserDifference'
        cName = 'unicomDifficultUserDifference'
      }
      const data = !list ? [] : list
      let xAxisData
      if (this.userType > 3) {
        xAxisData =
          data.length > 0
            ? echartType == 'line'
              ? data.map(v => this.getDay(String(v.ptDay)) || '')
              : ['移动', '联通', '电信']
            : []
      } else {
        xAxisData =
          data.length > 0
            ? echartType == 'line'
              ? data.map(v => this.getMoth(String(v.ptMonth)) || '')
              : ['移动', '联通', '电信']
            : []
      }
      // let xAxisData =
      // data.length > 0 ? ( echartType == 'line'
      //     ? data.map(v => this.getMoth(String(v.ptMonth)) || '')
      //     : [ '移动','联通', '电信' ] ) : [];
      const yAxisData1 =
        echartType == 'line' && this.clearPercentage(data, aName)
      const yAxisData2 =
        echartType == 'line' && this.clearPercentage(data, bName)
      const yAxisData3 =
        echartType == 'line' && this.clearPercentage(data, cName)

      // 算出 趋势的最大值最小值，按区间设置最大最小值
      console.log(list)
      if (echartType != 'line' && list) {
        let arr = list
          .filter(v => {
            return v != 0
          })
          .sort(function(a, b) {
            return a - b
          })

        this.maxY = arr[arr.length - 1]
        this.minY = arr[0]
      }

      let newMaxY = this.maxY
      let newMinY = this.minY
      let section = (newMaxY - newMinY) * 0.1
      console.log(newMaxY, newMinY, section)
      let maxY = Math.ceil((newMaxY + section) * 10) / 10
      let minY = parseInt((newMinY - section) * 10) / 10
      this.maxY = maxY > 100 ? (type == 3 ? maxY : 100) : maxY
      this.minY = minY < 0 ? 0 : minY
      console.log(this.maxY, this.minY)

      // ['#8be11b', '#ec1c10', '#152eaf'];

      const color =
        echartType == 'line'
          ? ['#92d050', '#2e75b6', '#ff0000']
          : ['#92d050', '#ff0000', '#2e75b6']
      // console.log(yAxisData1, yAxisData2, yAxisData3)
      let opt = this.getOption(
        color,
        type,
        cell,
        showName,
        echartType,
        xAxisData
      )
      // let opt = {};
      if (echartType == 'line') {
        // line 需要添加 xAxis.data, yAxis.name, yAxis.min（注：因为line的数据会存在0数据，所以不适用scale）, series
        opt.legend = { bottom: 0 }
        // opt.xAxis.data = xAxisData;
        opt.xAxis.axisLabel.fontSize = 8
        opt.yAxis.name = yAxisName
        opt.yAxis.min = this.minY
        opt.yAxis.max = this.maxY
        opt.tooltip.trigger = 'axis'
        opt.series = [
          {
            name: '移动',
            type: echartType,
            data: yAxisData1
          },
          {
            name: '电信',
            type: echartType,
            data: yAxisData2
          },
          {
            name: '联通',
            type: echartType,
            data: yAxisData3
          }
        ]
      } else {
        // bar 需要添加 yAxis.scale, series
        // opt.yAxis.scale = true;
        opt.yAxis.min = this.minY
        opt.yAxis.max = this.maxY
        let seriesBar = {
          name: showName,
          data: list,
          type: 'bar',
          barWidth: 25, //柱图宽度
          itemStyle: {
            normal: {
              color: function(params, colorList = opt.color) {
                if (!colorList) {
                  return null
                }
                let index = params.dataIndex % colorList.length
                return colorList[index]
                // var num = option.color.length;
                // return option.color[params.dataIndex % num]
              },
              barBorderRadius: 0
            }
          },
          label: {
            show: true,
            position: 'top',
            formatter: function(params) {
              return params.value + '%'
            },
            textStyle: {
              color: 'black',
              fontSize: '12'
            }
          }
        }

        opt.series = seriesBar
      }

      // console.log(list);
      console.log(opt)
      this.ratioOpt = opt
    },

    // 用来做共有属性option 使用
    // color: 颜色数组; type: 图表类型; cell：tooltip标题类; showName: 当前图表类名; type: 1为用户，2为网络; echartType: echart类型 line或bar
    getOption(color, type, cell, showName, echartType, xAxisData) {
      const opt = {
        color: color,
        // 这个 属性line 显示 bar不显示;
        // legend: {
        //   bottom: 0
        // },
        tooltip: {
          // trigger: 'axis',   // 这个 属性line 可以加 bar不能;
          formatter: function(params) {
            let html = ''
            if (type != 1) {
              html += `<div style="color:#666;padding-left:5px;">${cell}</div>`
            }
            let toHtml = (v, showName, type, color, nameStr, indexStr) => {
              return `
                <div style="font-size: 14px;line-height: 24px;color:#666;">
                  <span
                    style="display:inline-block;
                    margin-right:5px;
                    border-radius:10px;
                    width:10px;height:10px;
                    background-color:${color[v[indexStr]]};"
                  ></span>
                    ${v[nameStr]}
                    ${showName}：
                  <span
                    style="color:${color[v[indexStr]]};
                    font-weight:500;
                    font-size: 14px"
                  >
                    ${v.value != null ? v.value + (type != 3 ? '%' : '') : ''}
                  </span>
                </div>
              `
            }
            if (params instanceof Array) {
              params.forEach(v => {
                html += toHtml(
                  v,
                  showName,
                  type,
                  color,
                  'seriesName',
                  'componentIndex'
                )
              })
            } else {
              html += toHtml(params, showName, type, color, 'name', 'dataIndex')
            }

            return html
          },
          extraCssText:
            ' border-radius: 4px;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: 'rgba(255,255,255,0.8);'
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,  //该属性会使柱状图过于靠边
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#333'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#D9D9D9'
            }
          },
          data: xAxisData
        },
        yAxis: {
          type: 'value',

          // line 类型需要添加下面字段， bar需要添加scale:true
          // name: yAxisName,
          // min: this.minY,

          axisLabel: {
            textStyle: {
              color: '#666'
            }
          },
          nameTextStyle: {
            color: '#666',
            fontSize: 12
            // lineHeight: 40,
            // padding: [0, 10, -20, 0]
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#E9E9E9'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#D9D9D9'
            }
          },
          axisTick: {
            show: false
          }
        },
        grid: this.grid(echartType)
      }

      return opt
    },

    grid(echartType) {
      return {
        x: 40,
        y: 30,
        x2: 10,
        y2: 50
      }
    },

    getDay(v) {
      if (v) {
        return `${v.slice(4, 6)}月${v.slice(6, 8)}日`
      }
    },
    getMoth(v) {
      if (v)
        return v.slice(4, 5) == '0'
          ? v.slice(5, 6) + '月'
          : v.slice(4, 6) + '月'
    },
    clearPercentage(data, name) {
      // console.log(data, name);
      let list =
        data.length > 0
          ? data.map(v => {
              let a = Number(String(v[name]).replace('%', '')) || null
              return a
            })
          : []
      let arr = list
        .filter(v => {
          return v != null
        })
        .sort(function(a, b) {
          return a - b
        })
      console.log(arr)
      if (arr.length > 0) {
        let y = this.minY
        let maxY = this.maxY
        let ifSmall = false
        let ifMax = false

        if (y == 0) {
          y = arr[0]
          ifSmall = true
        } else if (arr[0] != 0 && arr[0] < y) {
          y = arr[0]
          ifSmall = true
        }

        if (maxY == 0) {
          maxY = arr[arr.length - 1]
          ifMax = true
        } else if (arr[arr.length - 1] > maxY) {
          maxY = arr[arr.length - 1]
          ifMax = true
        }

        this.maxY = ifMax ? Number(maxY) : this.maxY
        this.minY = ifSmall ? Number(y) : this.minY
        // console.log( ifMax, Number(maxY), ifSmall , Number(y) )
        // this.minY = parseInt( Number(y) * (ifSmall ? 0.995 : 1) )
        // console.log(this.maxY, this.minY);
      }
      return list
    }
  }
}
